<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8" />
    <meta content="width=device-width, initial-scale=1.0" name="viewport" />
    <title>知识详情</title>
    <!-- Tailwind CSS CDN -->
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://cdn.jsdelivr.net/npm/tailwindcss@3.3.0/dist/tailwind.min.css" rel="stylesheet">
    <!-- 自定义样式 -->
    <link href="../public/css/style.css" rel="stylesheet">
    <!-- Font Awesome CDN -->
    <link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/font-awesome/6.4.0/css/all.min.css">
</head>
<body class="bg-gray-100 font-sans">
<!-- Header -->
<header class="bg-blue-600 text-white p-4 shadow-md">
    <div class="container mx-auto flex justify-between items-center">
        <h1 class="text-3xl font-bold">劳动知识平台</h1>
        <nav>
            <ul class="flex space-x-6">
                <li>
                    <a
                            class="hover:text-blue-200 transition duration-300"
                            href="index.html"
                    >
                        首页
                    </a>
                </li>
                <li>
                    <a
                            class="hover:text-blue-200 transition duration-300"
                            href="javascript:void(0);"
                    >
                        劳动法规
                    </a>
                </li>
                <li>
                    <a
                            class="hover:text-blue-200 transition duration-300"
                            href="javascript:void(0);"
                    >
                        案例分析
                    </a>
                </li>
                <li>
                    <a
                            class="hover:text-blue-200 transition duration-300"
                            href="javascript:void(0);"
                    >
                        联系我们
                    </a>
                </li>
            </ul>
        </nav>
    </div>
</header>
<!-- Main Content -->
<main class="container mx-auto my-8 p-4 bg-white rounded-lg shadow-lg">
    <button
            onclick="history.back()"
            class="mb-4 px-4 py-2 bg-gray-200 text-gray-800 rounded-md hover:bg-gray-300 transition duration-300"
    >
        <i class="fas fa-arrow-left mr-2"></i>
        返回
    </button>
    <h2
            id="knowledgeTitle"
            class="text-3xl font-bold text-gray-800 mb-6 border-l-4 border-blue-500 pl-4"
    ></h2>
    <img
            id="knowledgeImage"
            class="w-full h-[500px] object-cover rounded-md mb-6 shadow-lg transition-transform duration-300 hover:scale-105"
            src=""
            alt="知识图片"
    />
    <div
            id="knowledgeContent"
            class="prose prose-lg max-w-none text-gray-700 leading-relaxed space-y-6"
    >
        <!-- 知识详细内容将加载到这里 -->
    </div>
</main>
<!-- Footer -->
<footer class="bg-gray-800 text-white p-6 mt-8">
    <div class="container mx-auto text-center text-sm">
        <p>© 2023 劳动知识平台. All rights reserved.</p>
        <div class="flex justify-center space-x-4 mt-2">
            <a class="hover:text-gray-300" href="javascript:void(0);">
                <i class="fab fa-weibo"> </i>
            </a>
            <a class="hover:text-gray-300" href="javascript:void(0);">
                <i class="fab fa-weixin"> </i>
            </a>
            <a class="hover:text-gray-300" href="javascript:void(0);">
                <i class="fab fa-qq"> </i>
            </a>
        </div>
    </div>
</footer>
<!-- 添加新的脚本标签指向打包后的文件 -->
<script type="module" src="./assets/js/api.js"></script>
<script type="module" src="./assets/js/script.js"></script>
</body>
</html>
